<template>
  <div class="content lists" v-if="artList.length">
    <scroll-view scroll-y @scrolltolower="toLow" @scroll="scroll" class="box">
      <ul>
        <li v-for="(item,index) in artList" :key="index">
          <!-- 无图 -->
          <a v-if="item.coverNumber===0" :href="'/pages/article/main?articleId='+item.articleId+'&&agentId='+item.agentId+'&&agentId='+item.agentId">
            <div class="no-cover">
              <div class="item-content">
                <h3 class="title">{{item.title}}</h3>
                <div class="userinfo">
                  <span class="hot" v-if="item.isHot"><img src="/static/images/hot.png" alt=""></span>
                  <span v-if="item.author">
                    <span>{{item.author}}</span></span>
                  <span>阅读
                    <span>{{item.hits}}</span>
                  </span>
                  <span class="item-agentName">{{item.agentName}}</span>
                </div>
              </div>
            </div>
          </a>
          <!-- 单图 -->
          <a v-if="item.coverNumber===1" :href="'/pages/article/main?articleId='+item.articleId+'&&agentId='+item.agentId+'&&agentId='+item.agentId">
            <div class="one-cover">
              <div class="item-content">
                <div class="cover-box">
                  <div class="left">
                    <div class="left-content">
                      <div class="title">{{item.title}}</div>
                      <div class="userinfo">
                        <span class="hot" v-if="item.isHot">
                          <img src="/static/images/hot.png" alt="">
                        </span>
                        <span v-if="item.author">
                          <span>{{item.author}}</span></span>
                        <span>阅读
                          <span>{{item.hits}}</span>
                        </span>
                        <span class="item-agentName">{{item.agentName}}</span>
                      </div>
                    </div>
                    
                  </div>
                  <div class="img">
                    <img :src="config.img + item.imgUrl" mode="widthFix">
                  </div>
                </div>
              </div>
            </div>
          </a>
          <!-- 多图 -->
          <a v-if="item.coverNumber===2" :href="'/pages/article/main?articleId='+item.articleId+'&&agentId='+item.agentId+'&&agentId='+item.agentId">
            <div class="more-cover">
              <div class="item-content clearfix">
                <h3 class="title">{{item.title}}</h3>
                <div class="cover-box">
                  <div class="img" v-for="(item2,index2) in item.imgUrl" :key="index2">
                    <img :src="config.img + item2 " mode="widthFix">
                  </div>
                </div>
                <div class="userinfo" style="padding-top: 4px;">
                  <span class="hot" v-if="item.isHot"><img src="/static/images/hot.png" alt=""></span>
                  <span v-if="item.author">
                    <span>{{item.author}}</span></span>
                  <span>阅读
                    <span>{{item.hits}}</span>
                  </span>
                  <span class="item-agentName">{{item.agentName}}</span>
                </div>
              </div>
            </div>
          </a>
        </li>
      </ul>
      <!-- <div class="bottom">
        <mp-loadmore not-content="亲，暂时没有内容~~~" v-if="!pload && artList.length < 1" />
        <mp-loadmore type="loading" v-if="pload" />
        <mp-loadmore not-content="亲，全部都给你了~~~" v-if="end" />
      </div> -->
    </scroll-view>
  </div>
</template>
<script>
import MpLoadmore from 'mp-weui/packages/loadmore'
// import { getList } from '@/utils/api'
import { config } from '@/utils/config'
export default {
  components: {
    MpLoadmore
  },
  props: {
    artList: []
  },
  data () {
    return {
      // page: 1,
      // pages: 0,
      // end: false,
      // pload: false,
      config: config
    }
  },
  created () {
    wx.setNavigationBarTitle({
      title: wx.getStorageSync('title')
    })
  },
  methods: {
    listEvent () {
      console.log(555)
    }
  }
}
</script>
<style scoped lang="scss">
.lists {
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .content {
    height: 100%;
  }

  .content > .box {
    height: 100%;
  }

  li {
    padding: 20px 0;
    margin: 0 20px;
    border-bottom: 1px solid rgba(221, 221, 221, 0.6);
  }

  .item-content {
    padding: 5px;
  }

  .title {
    font-size: 32px;
    color: #333;
    font-weight: 400 !important;
  }

  .one-cover .title{
    // position: relative;
    min-height: 100px;
  }

  .one-cover .cover-box {
    display: flex;
    justify-content: space-between;
    margin: 0 -2px;
  }

  .one-cover .left {
    flex: 2;
    // position: relative;
    margin: 0 6px 0 2px;
    align-content: space-between;
  }

  .left-content{
    // display: flex;
    // flex-direction: column;
    // align-content: flex-end;
    height:100%;
    position: relative;
  }

  .one-cover .img {
    flex: 1;
    overflow: hidden;
    margin: 0 2px;
    width: 220px;
    height: 156px;
  }

  .one-cover .img img {
    display: block;
    width: 100%;
    height: 1560px;
    background: #f2f2f2;
  }

  .more-cover .cover-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px -2px 0 -2px;
  }

  .more-cover .img {
    flex: 1;
    overflow: hidden;
    margin: 0 2px;
    width: 220px;
    height: 156px;
  }

  .more-cover .img img {
    width: 100%;
    height: 200px;
    display: block;
    background: #f2f2f2;
  }

  // .one-cover .right img {
  //   width: 100%;
  //   vertical-align: middle;
  // }

  

  .loading {
    font-size: 24px;
    text-align: center;
    color: #ccc;
  }

  .bottom {
    padding-bottom: 10px;
  }
  .userinfo {
    line-height: 40px;
    vertical-align:bottom;
  }
  .userinfo span {
    font-size: 24px;
    color: rgb(153, 153, 153);
    margin-right: 8px;
    vertical-align:bottom;
  }
  .item-agentName {
    line-height: 40px;
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align:bottom;
  }
  .hot {
    // font-size: 10px;
    // color: $color-danger !important;
    // border-radius: 4px;
    // padding: 0 2px;
    // border: 1px solid $color-danger;
    // transform: scale(0.7, 0.7);
    // vertical-align:bottom;
    // display: inline-block;
    // width: 26px;
    // height: 19px;
  }
  .hot img{
    display: inline-block;
    width: 26px;
    height: 19px;
    vertical-align:none;
    margin-top: 10px;
    // margin-top: 4px;
    // line-height: 40px;
    // vertical-align:bottom;
  }
}
</style>
